<template>
    <div>
        <!-- 卡片 -->
        <el-card class="box-card" v-for="item in list" :key="item.id" 
        @click.native="push(item)">
            <el-row>
                <el-col :span="10">
                    <img :src='item.image' class="image">
                </el-col>

                <el-col :span="2">
                    <div class="grid-content bg-purple-light">
                        <el-divider direction="vertical"></el-divider>
                    </div>
                </el-col>
                <el-col :span="12">
                    <h3>{{ item.title }}  {{item.name}}</h3>
                    <p>{{ item.desc }}</p>
                </el-col>
            </el-row>
        </el-card>
    </div>
</template>
<script>

export default {
    props: {
        list: {
            type: Array
        }
    },
    data() {
        return {
            path: '',
        }
    },
    created() {
        // this.push()
    },
    methods: {
        // item.path === 'category'?`/property/${item.id}`:`/propDetails/${item.id}`
        push(item) {
            console.log('id', item);
            this.$router.push(`/property/${item.id}`)

            // if(item.category){
            // }else{
            //     this.$router.push(`/propDetails/${item.id}`)
            // }
                // }else {
            //     console.log('else', item)
            // }

        }
    }
}
</script>
<style scoped>
.text {
    font-size: 14px;
}

.item {
    padding: 18px 0;
}

.box-card {
    /* width: 480px; */
    margin-bottom: 10px;

}

.image {
    width: 200px;
    height: 200px;
    margin: 0 50px;
    object-fit: cover;
}

/* 间隔线 */
.el-divider--vertical {
    display: inline-block;
    height: 13em;
    margin: 0 8px;
    background: 0 0;
    border-left: 1px solid #EBEEF5;
    position: relative;
}
</style>